<script setup lang="ts">

import {computed, ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {useDoPayApi, useGetMovieTypeListApi, useGetSessionDetailApi, useMovieDetailApi} from "@/services/api";
import {MovieCinemaType} from "@/interfaces/movie-cinema";
import type {DoPayReqVO, TicketInfoParams} from "@/interfaces/order";
import {MovieDetailRespVO} from "@/interfaces/movie";
import {useStore} from "vuex";

const store = useStore()
const show = ref<boolean>(false)
const userId = computed(()=>store.getters["auth/getUserId"])
const ticketInfo = ref<TicketInfoParams>({
  getByIdReqVo: {
    id: 0
  },
  movieDetailReq: {
    id: 0
  },
  selectedSeats: [],
  ticketCount: 0,
  totalPrice: ""
})
const movieSessionDetail = ref<MovieCinemaType>({
  endTime: "",
  format: "",
  id: 0,
  movieName: "",
  name: "",
  price: 0,
  seatColumn: 0,
  seatRow: 0,
  seatTotal: 0,
  soldMovieSeat: [],
  startTime: ""
})
const movie = ref<MovieDetailRespVO>({
  actors: "",
  chineseName: "",
  duration: "",
  englishName: "",
  id: 0,
  images: "",
  movieLanguage: "",
  releaseTime: "",
  score: "",
  type: ""
})
const sessionDate = computed(() => {
  const date = movieSessionDetail.value.startTime.split(" ")[0]
  const week = ["日", "一", "二", "三", "四", "五", "六"]
  const d = new Date(movieSessionDetail.value.startTime)
  return date[0] + "年" + date[1] + "月" + date[2] + "日" + " 星期" + week[d.getDay()]
})
const wallet = computed((): number => store.getters["auth/getUserInfo"].wallet)
const balanceStatus = computed(() => {
  return wallet.value < parseInt(ticketInfo.value.totalPrice)
})
const doPayReqVO = ref<DoPayReqVO>({
  movieSession: 0,
  seatList:[],
  totalPrice: 0,
  userId: ""
})
const handleSubmit = () => {
  show.value = true
}
const doPay = async () => {
  ticketInfo.value.selectedSeats.forEach(value => {
    doPayReqVO.value.seatList.push({
      rowCode:value[0],
      columnCode:value[1]
    })
  })
  doPayReqVO.value.userId = userId.value
  doPayReqVO.value.movieSession = movieSessionDetail.value.id
  doPayReqVO.value.totalPrice = parseFloat(ticketInfo.value.totalPrice)
  await useDoPayApi(doPayReqVO.value)
  await store.dispatch("auth/reloadUserInfo")
  await uni.redirectTo({
    url:"/pages/movie/result"
  })
}
/**
 * 初始化数据
 */
const init = async () => {
  const {data: res} = await useGetSessionDetailApi(ticketInfo.value.getByIdReqVo)
  const {data: movieData} = await useMovieDetailApi(ticketInfo.value.movieDetailReq)
  movie.value = movieData
  movieSessionDetail.value = res
}
onLoad(({data}): void => {
  ticketInfo.value = JSON.parse(data)
  init()
})
</script>

<template>
  <view class="container">
    <view class="movie-info">
      <view class="movie-image">
        <up-image
            :show-loading="true"
            :src="movie.images"
            width="130rpx"
            height="260rpx"
            mode="heightFix"
            radius="24rpx"
        ></up-image>
      </view>
      <view class="movie-content">
        <view class="movie-name">
          {{ movie.chineseName }}
        </view>
        <view class="movie-e-name">
          {{ movie.englishName }}
        </view>
        <view class="movie-type">
          {{ movie.type }}
        </view>
        <view class="movie-actor">
          <up-text :text="'主演：' + movie.actors" :lines="2" wordWrap="anywhere" size="24" color="#cbcbcb"></up-text>
        </view>
        <view class="movie-score">
          评分：{{ movie.score }}
        </view>
      </view>
    </view>
    <view class="order-content">
      <view class="order-info">
        <view class="date">
          {{ sessionDate }}
        </view>
        <view class="movie-time">
          <view class="datetime">
            <view class="start-time">
              {{ movieSessionDetail.startTime.split(" ")[1] }}
            </view>
          </view>
          <view class="icon">
            <view>
              {{ movieSessionDetail.name }}
            </view>
            <u-icon name="arrow-rightward" color="#45496A" size="48"></u-icon>
            <view>
              {{ movie.duration }}分钟
            </view>
          </view>
          <view class="datetime">
            <view class="end-time">
              {{ movieSessionDetail.endTime.split(" ")[1] }}
            </view>
          </view>
        </view>
        <u-divider
            text="已选座位"
            textColor="#45496A"
            lineColor="#7D8BAE"
            textSize="36"
        ></u-divider>
        <view class="ticket-info">
          <view class="ticket" v-for="(seat,index) in ticketInfo.selectedSeats" :key="index">
            {{ (seat[0] + 1) + "排" + (seat[1]+1) + "座" }}
          </view>
        </view>
      </view>
    </view>
    <view class="submit">
      <view class="submit-content">
        <view class="total-price">
          ￥{{ ticketInfo.totalPrice }}
        </view>
        <view class="submit-button">
          <up-button
              type="error"
              shape="circle"
              @click="handleSubmit"
          >
            确认支付
          </up-button>
        </view>
      </view>
    </view>
    <u-popup :show="show" :round="10" mode="bottom" @close="show = false" :closeOnClickOverlay="false"
             :closeable="true">
      <view class="poppup-content">
        <view>
          <text class="pay-money">￥{{ ticketInfo.totalPrice }}</text>
        </view>
        <view>
          <u-cell-group>
            <u-cell title="付款方式" titleStyle="color:#cccccc;" :border="false">
              <template #value>
                钱包(￥{{ wallet }}
                <text class="balance-status">{{ balanceStatus ? "余额不足" : "" }}</text>
                )
              </template>
            </u-cell>
          </u-cell-group>
        </view>
        <view class="pay-button">
          <view>
            <u-button text="支付" type="success" :disabled="balanceStatus" @click="doPay"></u-button>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #45496A;
}

.movie-info {
  display: flex;
  flex-direction: row;
  background-color: #45496A;
  height: 340rpx;
}

.movie-image {
  padding: 20rpx;
  flex: 1;
}

.movie-content {
  padding: 20rpx;
  flex: 3;
}

.movie-name {
  font-size: 42rpx;
  color: #ffffff;
  font-weight: bold;
}

.movie-e-name {
  font-size: 24rpx;
  color: #cbcbcb;
}

.movie-actor, .movie-type {
  font-size: 28rpx;
  color: #cbcbcb;
}

.movie-score {
  font-size: 28rpx;
  color: #ffa321;
}

.movie-content > view {
  margin-bottom: 15rpx;
}

.order-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #7D8BAE;
  border-radius: 24rpx 24rpx 0 0;
  height: 100%;
  padding: 24rpx;
}

.order-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fdfdfd;
  border-radius: 24rpx;
}

.movie-time {
  width: 90vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-top: 24rpx;
}

.datetime {
  color: #45496A;
  padding: 24rpx;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.start-time, .end-time {
  font-size: 48rpx;
}

.date {
  color: #7D8BAE;
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon view {
  font-size: 16rpx;
}

.ticket-info {
  width: 80vw;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16rpx;
  padding: 24rpx;
}

.ticket {
  background-color: #E8CCC7;
  border-radius: 16rpx;
  padding: 12rpx;
}

.submit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100vw;
  background-color: #ffffff;
}

.submit-button {
  width: 50%;
}

.submit-content {
  padding: 24rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.total-price {
  color: #E5857B;
}

.pay-money {
  font-size: 64rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24rpx;
}

.poppup-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64rpx 24rpx;
}

.pay-button {
  margin-top: 64rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pay-button view {
  width: 50%;
}

.balance-status {
  color: #cccccc;
}
</style>